import { memo, PureComponent } from 'react'
import { Link } from 'react-router-dom';
import ArticlesList from '../ArticlesList'


const mock = {
    profile:{
        username:'lis',
        avatar:'https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg',
        bio:'lis bio',
        email:'lis@qq.com',
        following:false
    },
    currentUser:{
        username:'li',
        avatar:'https://gu0nuli.github.io/reactStatic/react_static/v1_111.jpg',
        bio:'li bio',
        email:'li@qq.com',
    },
    article:{
        "articles": [
            {
                "slug": "1371cdf8",
                "title": "你好aa",
                "description": "html 你好aa",
                "body": "html 你好aa",
                "createdAt": "2022-01-20T05:28:57.000Z",
                "updatedAt": "2022-01-20T05:28:57.000Z",
                "userEmail": "lisi@qq.com",
                "tags": [
                    "html",
                    "tag1"
                ],
                "author": {
                    "username": "lisi",
                    "email": "lisi@qq.com",
                    "bio": null,
                    "avatar": null
                },
                "isFavorite": false,
                "favoriteCount": 55
            },
            {
                "slug": "1371cdf8",
                "title": "你好aa",
                "description": "html 你好aa",
                "body": "html 你好aa",
                "createdAt": "2022-01-20T05:28:57.000Z",
                "updatedAt": "2022-01-20T05:28:57.000Z",
                "userEmail": "lisi@qq.com",
                "tags": [
                    "html",
                    "tag1"
                ],
                "author": {
                    "username": "lisi",
                    "email": "lisi@qq.com",
                    "bio": null,
                    "avatar": null
                },
                "isFavorite": true,
                "favoriteCount": 33
            },
            {
                "slug": "1371cdf8",
                "title": "你好aa",
                "description": "html 你好aa",
                "body": "html 你好aa",
                "createdAt": "2022-01-20T05:28:57.000Z",
                "updatedAt": "2022-01-20T05:28:57.000Z",
                "userEmail": "lisi@qq.com",
                "tags": [
                    "html",
                    "tag1"
                ],
                "author": {
                    "username": "lisi",
                    "email": "lisi@qq.com",
                    "bio": null,
                    "avatar": null
                },
                "isFavorite": false,
                "favoriteCount": 55
            },
        ],
        "articlesCount": 3
    }

}

const ButtonInfo = memo((props) => {
    const { isCurrentUser, profile } = props
    if (isCurrentUser) {
        return (
            <Link to='/setting' className="btn btn-sm btn-outline-secondary action-btn">
                <i className="fa fa-cog"></i> 编辑设置
            </Link>
        )
    } else {
        return (
            // className='btn btn-sm action-btn'
            <Link to='/setting' className={profile.following ? 'btn-secondary' : 'btn-outline-secondary'}>
                <i className="fa fa-cog"></i> {profile.following ? '取消关注' : '关注作者'}
            </Link>
        )
    }
})

class Profile extends PureComponent {
    renderTag = () => {
        return (
            <ul className="nav nav-pills outline-active" >
                <li className='nav-item' >
                    <Link className="nav-link active" to={`/${mock.currentUser.username}/profile`}>
                        <i class="fa fa-heart-o"></i> 我的文章
                    </Link>
                </li>
                <li className='nav-item' >
                    <Link className="nav-link" to={`/${mock.currentUser.username}/favorites`}>
                        <i class="fa fa-heart-o"></i> 喜欢文章
                    </Link>
                </li>
            </ul>
        )
    }
    render() {
        const { profile, currentUser, article } = mock
        const isCurrentUser = currentUser && profile.username === currentUser.username
        return (
            <div className='profile-page' >

                <div className='user-info' >
                    <div className='container' >
                        <div className='row' >
                            <div className='col-xs-12 col-md-10 offset-md-1'>
                                <img src={profile.avatar || ''} className='user-img' alt={profile.avatar} ></img>
                                <h4>{profile.username}</h4>
                                <p>{profile.bio}</p>

                                <ButtonInfo isCurrentUser={isCurrentUser} profile={profile} />
                            </div>
                        </div>
                    </div>
                </div>

                <div className='container' >
                    <div className="row" >
                        <div className="col-xs-12 col-md-10 offset-md-1">

                            <div className='aticles-toggle' >
                                {this.renderTag()}
                            </div>

                            <ArticlesList articles={article.articles} articlesCount={article.articlesCount} currentPage={1} />
                        </div>
                    </div>
                </div>


            </div>
        )

    }
    componentDidMount() {
        //作者信息
        //作者文章
    }
}

export default Profile;
